{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .add_background {
            background: #A9A9A9;
        }

        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }

        tr {
            height: 35px;
        }

        th {
            text-align: center;
        }

        table {
            table-layout: fixed;
        }

        td:first-child, th:first-child {
            position: sticky;
            left: 0; /* 首行永远固定在左侧 */
            z-index: 1;
        }

        thead tr th {
            position: sticky;
            top: 0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }

        th:first-child {
            z-index: 2;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline" style="background-color: white;">
        <div style="width: 10%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a id="reserve" href="#" style="color: #1E90FF;">
                <i class="iconfont icon-tongji"></i>
                <span> 使用统计</span>
            </a>
        </div>
    </div>

    <div style="width: 100%;height: 93%;overflow: auto;margin-top: 0.5%;">
        <div style="width: 100%;height: 400px;background-color: white;">
            <div style="width: 32%;height: 40px;text-align: left;line-height: 40px;padding-left: 1%;color: #1E90FF;">
                近30天会议室使用统计
            </div>
            <hr>
            <div style="width: 100%;border: #cfcfcf solid 0.5px;height: 350px;padding-top: 2%;padding-left: 2%;background: white;">
                <div style="width: 48%;height: 100%;display: inline-block;vertical-align: top;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">部门申请统计</h5></span>
                    <div id="main-left" style="width: 100%;height: 100%;"></div>
                </div>
                <div style="width: 48%;height: 100%;text-align: center;display: inline-block;">
                    <span style="display: inline-block;"><h5 style="color: #1E90FF;">会议室使用统计</h5></span>
                    <div id="main" style="display: inline-block;vertical-align: top;width: 100%;height: 95%;"></div>
                </div>
            </div>
        </div>

        <div style="width: 100%;height: 600px;background-color: white;margin-top: 1%;">
            <div style="width: 100%;height: 40px;text-align: left;padding-left: 1%;color: #1E90FF;line-height: 40px;">
                会议室申请列表
            </div>
            <hr>
            <div style="width: 100%;height: 550px;overflow: auto;">
                <div class="right-box" style="width: 100%;height: 95%;">
                    <div style="height: 100%;width: 100%;overflow: auto;">
                        <table class="table table-hover table-bordered"
                               style="border-collapse: collapse;width: 100%;table-layout:fixed;">
                            <thead>
                            <tr>
                                <th scope="col" style="width: 30%;">会议事由</th>
                                <th scope="col" style="width: 5%;">申请人</th>
                                <th scope="col" style="width: 10%;">会议部门</th>
                                <th scope="col" style="width: 10%;">开始时间</th>
                                <th scope="col" style="width: 10%;">结束时间</th>
                                <th scope="col" style="width: 5%;">会议进程</th>
                            </tr>
                            </thead>
                            <tbody style="overflow: auto;" id="t_table4"></tbody>
                        </table>
                        <div id="img-display4" style="width: 75%;text-align: center;position: fixed;display: none;">
                            <div style="margin-top: 10%;">
                                <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                                <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("personage").className = "add_class";
            document.getElementById("sponsor").className = "add-nav-active";
        };
        var chart = echarts.init(document.getElementById("main"));
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '流程统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {{ meet_all_list | safe }}
                }
            ]
        };
        chart.setOption(option);

        var dep_all_dict = {{ dep_all_dict | safe }};
        var chart4 = echarts.init(document.getElementById("main-left"));
        var option4 = {
            xAxis: {
                type: 'category',
                data: dep_all_dict["abscissa"],
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    interval: 0,//使x轴文字显示全
                    rotate: 45,
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: dep_all_dict["ordinate"],
                    type: 'bar'
                }
            ]
        };
        chart4.setOption(option4);

        var all_data_list = {{ all_data_list | safe }};
        var t_table4 = document.getElementById("t_table4");
        if (!all_data_list.length) {
            document.getElementById("img-display4").style.display = "inline-block";
        }

        for (var y = 0; y < all_data_list.length; y++) {
            var tr_2 = document.createElement("tr");
            var status = "";
            if (all_data_list[y]["status"] === "0") {
                status = "未开始";
                tr_2.style.color = "#FF0000";
            } else if (all_data_list[y]["status"] === "1") {
                status = "进行中";
                tr_2.style.color = "#90EE90";
            } else {
                status = "已结束";
            }
            var Td = document.createElement("td");
            var Td1 = document.createElement("td");
            var Td2 = document.createElement("td");
            var Td3 = document.createElement("td");
            var Td4 = document.createElement("td");
            var Td5 = document.createElement("td");
            Td.innerHTML = all_data_list[y]["particular"];
            Td.style.paddingLeft = "1%";
            Td1.innerHTML = all_data_list[y]["name"];
            Td1.style.textAlign = "center";
            Td2.innerHTML = all_data_list[y]["department"];
            Td2.style.textAlign = "center";
            Td3.innerHTML = all_data_list[y]["start_time"];
            Td3.style.textAlign = "center";
            Td4.innerHTML = all_data_list[y]["end_time"];
            Td4.style.textAlign = "center";
            var status = ''
            if (all_data_list[y]["status"] === "0"){
                status = "未开始"
            }
            if (all_data_list[y]["status"] === "1"){
                status = "进行中"
            }
            if (all_data_list[y]["status"] === "2"){
                status = "已结束"
            }
            if (all_data_list[y]["status"] === "3"){
                status = "已撤回"
            }
            Td5.innerHTML = status;
            Td5.style.textAlign = "center";
            tr_2.appendChild(Td);
            tr_2.appendChild(Td1);
            tr_2.appendChild(Td2);
            tr_2.appendChild(Td3);
            tr_2.appendChild(Td4);
            tr_2.appendChild(Td5);
            t_table4.appendChild(tr_2);
        }
    </script>
{% endblock %}
